<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>

		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="img/slider4.png">
							</a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="img/slider1.jpg">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="img/slider2.jpg">
							</a>
						</div>
						<!-- 第三张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="img/slider3.jpg">
							</a>
						</div>
						<!-- 第四张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="img/slider4.png">
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="http://placehold.it/400x300">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<!--数据列表-->

				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;" title="滴滴">
							<img class="mui-media-object mui-pull-left" src="img/didi.png">
							<div class="mui-media-body">
								滴滴打车
								<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;" title="京东">
							<img class="mui-media-object mui-pull-left" src="img/icon_jingdong.png">
							<div class="mui-media-body">
								京东
								<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;" title="淘宝">
							<img class="mui-media-object mui-pull-left" src="img/taobao.png">
							<div class="mui-media-body">
								淘宝
								<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
							</div>
						</a>
					</li>
				</ul>

			</div>
		</div>
	</body>
	<script type="text/javascript" charset="UTF-8">
		mui.init({
			pullRefresh: {
				container: "#refreshContainer",
				down: {
					contentdown: "下拉可以刷新",
					contentover: "释放立即刷新",
					contentrefresh: "正在刷新",
					callback: pulldownRefresh
				},
				up: {
					callback: pullupRefresh
				}
			}

		});

		function pulldownRefresh() {
			setTimeout(function() {
				var table = document.querySelector(".mui-table-view");
				for(var i = 0; i < 3; i++) {
					var li = document.createElement("li");
					li.className = "mui-table-view-cell mui-media";
					var str = "";
					str += "<img class='mui-media-object mui-pull-left' src='img/taobao.png'>";
					str += "<div class='mui-media-body'>";
					str += "淘宝";
					str += "<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>";
					str += "	</div>";
					li.innerHTML = str;
					table.insertBefore(li, table.firstChild);
				}

				mui("#refreshContainer").pullRefresh().endPulldownToRefresh()
			}, 1500);
		}

		function pullupRefresh() {
			setTimeout(function() {
				var table = document.querySelector(".mui-table-view");
				for(var i = 0; i < 3; i++) {
					var li = document.createElement("li");
					li.className = "mui-table-view-cell mui-media";
					var str = "";
					str += "<img class='mui-media-object mui-pull-left' src='img/didi.png'>";
					str += "<div class='mui-media-body'>";
					str += "滴滴";
					str += "<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>";
					str += "	</div>";
					li.innerHTML = str;
					table.appendChild(li);
				}
				mui("#refreshContainer").pullRefresh().endPullupToRefresh()
			}, 1500);
		}
	</script>

</html>